<template>
 <div  class="NavBar" :style="{background:bg}">
  <div class="left">
   <div v-if="flagLeft">
    <span >&lt;</span>
    <span>{{ backText }}</span>
   </div>
  </div>
  <div class="center">{{ center }}</div>
  <div class="right" >
    <span v-if="flagRight" @click="handle">{{ rightText }}</span>
  </div>
 </div>
</template>
<script>

/* 封装组件：封装好了之后就不在更改了 */
export default{
    name:'',
    props:{
      backText:{
        type:String,
        default:'返回'
      },
      flagLeft:Boolean,
      center:String,
      flagRight:Boolean,
      rightText:String,
      bg:String
    },
    data () {
        return {

        }
    },
    created () {
    },
    computed:{
    },
    methods:{
      handle(){
        this.$emit('rightHandle')
      }
    }
}
</script>
<style lang='less'  scoped>
 .NavBar{
display: flex;
justify-content: space-between;
 }
</style>